<template>
    <div class="largeScreen-2">
        <div class="largeScreen-2-title"><span class="gradient-text">公司采购金额预览</span></div>
        <div class="largeScreen-2-select">
            <div class="se-btn " @click="change(item)" :class="item.isSelected ? 'active_btn' : ''"
                v-for="item, index in datebtn" :key="index">{{ item.text }}</div>
        </div>
        <div id="largeScreen-2" style="width: 40%;height:55%;"></div>
        <div class="qoq" v-if="qoq != 0">
            <div class="qoq_name">环比</div>
            <div class="qoq_num" :class=" qoq > 0  ?  'up' :'down'  ">{{ qoq }}%</div>
        </div>
        <div class="total" v-if="total != 0">
            <div class="total_name">总额</div>
            <div class="total_num" >{{ total }}</div>
        </div>
        <div class="largeScreen-2-con">
            <div class="largeScreen-2-con-item" v-for="{color,name,value}, index in data" :key="index" @click="go_gs_goods_classify(item.id)">
                <div class="largeScreen-2-con-item-color" :style="{ background: color }"></div>
                <div class="largeScreen-2-con-item-title">{{ name }}</div>
                <div class="largeScreen-2-con-item-value">{{  parseInt(value).toLocaleString('en-US') }}</div>
            </div>
        </div>
    </div>
</template>


<script>
import * as echarts from 'echarts'
export default {
    components: {},

    data() {
        return {
            datebtn: [
                {
                    text: '近7天',
                    isSelected: true,
                    type: '1'
                },
                {
                    text: '近30天',
                    isSelected: false,
                    type: '2'
                },
                {
                    text: '历史总计',
                    isSelected: false,
                    type: ''
                },
            ],
            data: [],
            type: '',
            qoq:'',
            total:''
        };
    },
    beforeDestroy() {
        // 组件销毁时清除定时器
        if (this.refreshInterval) {
            clearInterval(this.refreshInterval);
        }
    },
    methods: {
        go_gs_goods_classify(val){
            window.open( `https://api.gygsjcpt.cn/admin/goods.Goods/lists.html?platform_cate_id=${val}`,'_blank')
        },
        init() {
            var myChart = echarts.init(document.getElementById('largeScreen-2'));


            let data = [
                { value: 666, name: '呼兰区' },
                { value: 193, name: '道里区' },
                { value: 300, name: '南岗区' },
                { value: 200, name: '松北区' },
            ];
            const colorList = [
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: "rgba(69,233,254,1)"
                },
                {
                    offset: 1,
                    color: "rgba(69,233,254,0.3)"
                }
                ]),
                new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: "rgba(255,181,111,1)"
                },
                {
                    offset: 1,
                    color: "rgba(255,181,111,0.3)"
                }
                ]),
                new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: "rgba(101,122,250,1)"
                },
                {
                    offset: 1,
                    color: "rgba(101,122,250,0.3)"
                }
                ]),
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: "rgba(45,190,146,1)"
                },
                {
                    offset: 1,
                    color: "rgba(45,190,146,0.3)"
                }
                ]),
            ];
            const option = {

                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['60%', '100%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },

                        labelLine: {
                            show: false
                        },
                        data: this.data
                    }
                ]
            };
            myChart.setOption(option);
        },
        async change(item) {
            this.datebtn.forEach(item => item.isSelected = false)
            item.isSelected = true;
            this.type = item.type

            await this.getLargeData(item.type, localStorage.getItem('change_id'))
            this.init();
        },
        async getLargeData(type, id) {
            const res = await this.$axios.get(`https://api.gygsjcpt.cn/api/visualization2/data_3?type=${type}&company_id=${id}`)
            this.data = res.data.data.list
            this.qoq = res.data.data.qoq
            this.total = res.data.data.total
        },
        async change_com() {
            this.datebtn.forEach(item => item.isSelected = false)
            this.datebtn[0].isSelected = true
            await this.getLargeData(this.type = 1, localStorage.getItem('change_id'))
            this.init();
        },
    },
    async mounted() {
        await this.getLargeData(1, localStorage.getItem('change_id'))
        this.init();
        this.refreshInterval = setInterval(async () => {
            if (this.type == '') {
                this.type = 1
                this.datebtn.forEach(item => item.isSelected = false)
                this.datebtn[0].isSelected = true
                await this.getLargeData(1, localStorage.getItem('change_id'))
                this.init();
            }else if(this.type == 1){
                this.type = 2
                this.datebtn.forEach(item => item.isSelected = false)
                this.datebtn[1].isSelected = true
                await this.getLargeData(2, localStorage.getItem('change_id'))
                this.init();
            }else if(this.type == 2){
                this.type = ''
                this.datebtn.forEach(item => item.isSelected = false)
                this.datebtn[2].isSelected = true
                await this.getLargeData('', localStorage.getItem('change_id'))
                this.init();
            }
        }, 300000);
    },
    watch: {

    }
};
</script>

<style lang="scss" scoped>
.largeScreen-2 {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #05133b30 0%, #00206f30 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .qoq{
        position: absolute;
        top: 30%;
        left: 5%;
        color: #fff;
        .qoq_name{
            margin-bottom: 5px;
            font-size: 12px;
        }
        .qoq_num{
            font-size: 14px;
            font-weight: 700;
        }
        .down{
            color: #00f6a6;
            position: relative;
            &::before{
                content: "";
                width: 15px;
                height: 15px;
                background: url('https://api.gygsjcpt.cn/pcimg/down1.png');
                background-size: 100% 100%;
                position: absolute;
                right: -30%;
                top: -10%;
            }
        }
        .up{
            color: #f64747;
            position: relative;
            &::before{
                content: "";
                width: 15px;
                height: 15px;
                background: url('https://api.gygsjcpt.cn/pcimg/up1.png');
                background-size: 100% 100%;
                position: absolute;
                right: -30%;
                top: -10%;
            }
        }
    }
    .total{
        position: absolute;
        top: 30%;
        right: 5%;
        color: #fff;
        .total_name{
            margin-bottom: 5px;
            font-size: 12px;
        }
        .total_num{
            font-size: 14px;
            font-weight: 700;
        }

    }
    .largeScreen-2-title {
        color: #fff;
        width: 100%;
        font-size: 17px;
        letter-spacing: 2px;

        height: 15%;
        padding-left: 20%;
        background: url('https://api.gygsjcpt.cn/pcimg/title_bg_short.png');
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        margin-bottom: 5%;
    }

    .largeScreen-2-select {
        width: 90%;
        justify-content: space-between;
        display: flex;
        color: #fff;
        cursor: pointer;

        .se-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            padding: 5px 12px;
            border-radius: 20px;
            border: 1px solid #06318c;
        }

        .active_btn {
            background: linear-gradient(to right, #239dfa, #032d75);
        }
    }

    .largeScreen-2-con {
        height: 25%;
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        flex-wrap: wrap;
        grid-template-columns: repeat(2, 50%);

        .largeScreen-2-con-item {
            width: 50%;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            overflow: hidden;
            margin-bottom: 5px;
            cursor: pointer;

            .largeScreen-2-con-item-color {
                width: 6px;
                height: 6px;
                // border-radius: 10%;
                flex-shrink: 0;
                background: #000;

            }

            .largeScreen-2-con-item-title {
                display: flex;
                font-size: 12px;
                margin: 0 5px;
                width: 42%;
                white-space: nowrap;
                /* 确保文本在一行内显示 */
                overflow: hidden;
                /* 隐藏溢出的内容 */
                text-overflow: ellipsis;
                /* 使用省略号表示溢出的文本 */

            }

            .largeScreen-2-con-item-value {
                display: flex;
                font-size: 12px;
            }
        }
    }
}
</style>